<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Airwallex Checkout Playground</title>
    <!-- STEP #1: Import airwallex-payment-elements bundle -->
    <script src="https://checkout.airwallex.com/assets/elements.bundle.min.js"></script>
  </head>

  <body>
    <h1>Card integration</h1>
    <label>
      Card Information
      <!-- STEP #3a: Add an empty container for the card element to be injected into -->
      <div id="card"></div>
    </label>
    <br />
    <!-- STEP #3b: Add a submit button to trigger the payment request -->
    <button id="submit">Submit</button>

    <script>
      // STEP #2: Initialize the Airwallex global context for event communication
      Airwallex.init({
        env: 'staging', // Setup which Airwallex env('staging' | 'demo' | 'prod') to integrate with
        origin: window.location.origin, // Setup your event target to receive the browser events message
      });
      // STEP #4: Create 'card' element
      const card = Airwallex.createElement('card');

      // STEP #5: Mount card element
      const domElement = card.mount('card');

      // STEP #6a: Add a button handler to trigger the payment request
      document.getElementById('submit').addEventListener('click', () => {
        Airwallex.confirmPaymentIntent({
          element: card,
          intent_id: 'replace-with-your-intent-id',
          client_secret: 'replace-with-your-client-secret',
        })
          .then((response) => {
            // STEP #6b: Listen to the request response
            /* handle confirm response*/
            window.alert(JSON.stringify(response));
          })
          .catch((response) => {
            // STEP #6c: Listen to the error response
            /* handle error response*/
            console.log('There was an error', response);
          });
      });

      // STEP #7: Add an event listener to ensure the element is mounted
      domElement.addEventListener('onReady', (event) => {
        /*
        ... Handle event
         */
        window.alert(event.detail);
      });
    </script>
  </body>
</html>